<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas 绘制线条的帽子lineCap</title>
</head>

<body>
<div id="canvas-warp">
    <canvas id="canvas" style=" border: 1px solid #aaaaaa; display: block; margin:  50px auto;">
    你的浏览器居然不支持Canvas? 
    </canvas>
</div>

<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 600;
    var context = canvas.getContext("2d");

    context.lineWidth = 50;
    context.strokeStyle = "#1BAAAA";

    context.beginPath();
    context.moveTo(100, 100);
    context.lineTo(700, 100);
    context.lineCap = "butt";
    context.stroke();

    context.beginPath();
    context.moveTo(100, 300);
    context.lineTo(700, 300);
    context.lineCap = "round";
    context.stroke();

    context.beginPath();
    context.moveTo(100, 500);
    context.lineTo(700, 500);
    context.lineCap = "square";
    context.stroke();

    //下面画两个基准线方便观察
    context.lineWidth = 3;
    context.strokeStyle = "black";

    context.beginPath();
    context.moveTo(100, 0);
    context.lineTo(100, 600);
    context.moveTo(700, 0);
    context.lineTo(700, 600);
    context.stroke();
}

function drawBlackRect(cxt, x, y, width, height) {
    cxt.beginPath();
    cxt.rect(x, y, width, height);
    cxt.closePath();

    cxt.lineWidth = 5;
    cxt.strokeStyle = "black";

    cxt.stroke();
}

function drawWhiteRect(cxt, x, y, width, height) {
    cxt.beginPath();
    cxt.rect(x, y, width, height);
    cxt.closePath();

    cxt.lineWith = 5;
    cxt.strokeStyle = "white";

    cxt.stroke();
}
</script>
</body>

</html>